<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="style2.css">
</head>

<body>
  
  <header>
    <div class="navBar">
      <div class="titleLeft">
        <a href="#" class="titleLink">开课吧首页 </a>
        <a href="#" class="titleLink">创业微课堂</a>
        <a href="#" class="titleLink">摄影微课堂</a>
        <a href="#" class="titleLink">微聚</a>
        <a href="#" class="titleLink">论坛 </a>
      </div>
      <div class="titleRight">
        <a href="#" class="titleLink">登录|注册 </a>
        <a href="#" class="titleLink">播放记录 </a>
        <a href="#" class="titleLink">App下载</a>
      </div>
    </div>

    <div class="navBar2">
      <div class="titleLeft">
        <a href="#" class="titleLink2">
          <span style="font-size: 30px">摄影</span>
          <span style="font-size: medium">开课吧</span>
        </a>
        <a href="#" class="titleLink2">个人中心</a>
        <a href="#" class="titleLink2">视频播放</a>
      </div>
      <div class="titleRight">
        <img src="11.jpg" alt="11" />
        <img src="11.jpg" alt="11" />
        <img src="11.jpg" alt="11" />
        <img src="11.jpg" alt="11" />
      </div>
    </div>
  </header>

  
  <section class="banner">
    <img src="2.jpg" alt="风景">
  </section>
 

<!-- 最热视频 -->
  <section>
    <h2>最热视频</h2>
    <div class="hot-videos">
      <div class="large">
        <img src="2.jpg" alt="2.jpg">
      </div>
      <div class="item1">
        <img src="2.jpg" alt="2.jpg">
      </div>
      <div class="item2">
        <img src="2.jpg" alt="2.jpg">
      </div>
      <div class="item3">
        <img src="2.jpg" alt="2.jpg">
      </div>
      <div class="item4">
        <img src="2.jpg" alt="2.jpg">
      </div>
      <div class="item5">
        <img src="2.jpg" alt="2.jpg">
      </div>
    </div>
  </section>
  <hr>
<!-- 大咖推荐 -->
  <section class="recommend">
    <h2>大咖推荐-看看牛人分享</h2>
    <div class="recommend-grid">
      <div class="recommend-item">
        <img src="2.jpg" alt="照片1">
      </div>
      <div class="recommend-item">
        <img src="2.jpg" alt="照片2">
      </div>
      <div class="recommend-item">
        <img src="2.jpg" alt="照片3">
      </div>
      <div class="recommend-item">
        <img src="2.jpg" alt="照片4">
      </div>
    </div>

  </section>
 <hr>
  
  <footer>
    <p>Copyright@2025 摄影·分享 版权所有</p>
  </footer>
</body>

</html>